{% extends 'layout.html' %}
{% block content %}
<div class="card">
    <div class="card-header">
        新建管理员
    </div>
    <div class="card-body">
        <form method="post" novalidate>
            {% csrf_token %}
            {% if form.non_field_errors %}
                <div class="alert alert-danger">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
            {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                    <div class="input-group">
                        {{ field }}
                    </div>
                    {% if field.errors %}
                        <span class="text-danger">{{ field.errors.as_text }}</span>
                    {% endif %}
                </div>
            {% endfor %}
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</div>

<script>
function togglePasswordVisibility(fieldId) {
    const passwordField = document.getElementById(fieldId);
    const toggleIcon = document.getElementById('toggle-icon-' + fieldId);

    // 定义两个SVG路径
    const eyeFillPath = `
        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
    `;
    const eyeSlashFillPath = `
        <path d="M10.79 12.914l-1.614-1.614m-2.288 2.288a3.5 3.5 0 0 1-4.95-4.95l3.536 3.535zm-7.07 1.314L5.172 8.657a8 8 0 1 1 11.314-11.314L8 5.172a8 8 0 0 1-11.314 11.314zM5 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
    `;

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        // 替换SVG内容
        toggleIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash-fill" viewBox="0 0 16 16">${eyeSlashFillPath}</svg>`;
    } else {
        passwordField.type = 'password';
        // 替换SVG内容
        toggleIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">${eyeFillPath}</svg>`;
    }
}
</script>
{% endblock %}



